Вход

Просмотр полной версии : Пагинация AJAX


NetMale
22.04.2012, 18:33
Доброго времени суток.
Хочу сделать пагинацию, используя jQuery + AJAX.
Вот код для начала:
$(document).ready(function(){
$(".navigation a").click(function(event) {
event.preventDefault();
var url = $(this).attr("href");
$.ajax({
type: "GET",
url: $(this).attr("href"),
success: function(msg) {
$("#content").html(msg);
}
});
});
});
Когда я кликаю по навигационной ссылке, то в блок #content подгружается вся html страница (msg в данном случае), которая тоже имеет блок #content с содержимым, которое мне и надо вставить вместо всей страницы.
Кто-нибудь знает, какими способами можно решить проблемы или куда копать?
Заранее благодарен.

Octane
22.04.2012, 18:53
http://api.jquery.com/load/#loading-page-fragments

NetMale
22.04.2012, 19:18
load() использовал, вот с ajax-функцией интереснее..

Octane
22.04.2012, 19:26
Ну открываем dev-версию jQuery 1.7.2 и находим метод load начиная со строки 7126:
load: function( url, params, callback ) {
if ( typeof url !== "string" && _load ) {
return _load.apply( this, arguments );

// Don't do a request if no elements are being requested
} else if ( !this.length ) {
return this;
}
*!*
var off = url.indexOf( " " );
if ( off >= 0 ) {
var selector = url.slice( off, url.length );
url = url.slice( 0, off );
}
*/!*
// Default to a GET request
var type = "GET";

// If the second parameter was provided
if ( params ) {
// If it's a function
if ( jQuery.isFunction( params ) ) {
// We assume that it's the callback
callback = params;
params = undefined;

// Otherwise, build a param string
} else if ( typeof params === "object" ) {
params = jQuery.param( params, jQuery.ajaxSettings.traditional );
type = "POST";
}
}

var self = this;

// Request the remote document
jQuery.ajax({
url: url,
type: type,
dataType: "html",
data: params,
// Complete callback (responseText is used internally)
complete: function( jqXHR, status, responseText ) {
// Store the response as specified by the jqXHR object
responseText = jqXHR.responseText;
// If successful, inject the HTML into all the matched elements
if ( jqXHR.isResolved() ) {
// #4825: Get the actual response in case
// a dataFilter is present in ajaxSettings
jqXHR.done(function( r ) {
responseText = r;
});
*!*
// See if a selector was specified
self.html( selector ?
// Create a dummy div to hold the results
jQuery("<div>")
// inject the contents of the document in, removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append(responseText.replace(rscript, ""))

// Locate the specified elements
.find(selector) :

// If not, just inject the full result
responseText );
}
*/!*
if ( callback ) {
self.each( callback, [ responseText, status, jqXHR ] );
}
}
});

return this;
},

красным выделено то, что реализует нужный вам функционал на основе $.ajax.

Что-то выделение глючит, второй блок на пару строк вверх надо поднять…

razerxxx
23.04.2012, 00:08
можно сделать так:
вместо
$(".navigation a").click(function(event) { ... }
вот так
$(document).on('click', ".navigation a", function(event) { ... })
а вместо
$("#content").html(msg);
вот так:
$("#content").replaceWith(msg)